<!DOCTYPE html>
<html>
    <head>
        <title>新风格</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="./vendor/avalon/avalon.js" ></script>
        <script>
            var model = avalon.define({
                $id: "ms-class",
                toggle: true,
                click: function(e) {
                    model.toggle = !model.toggle
                }
            })

            var model2 = avalon.define({
                $id: "test2",
                w: 500,
                h: 200,
                bottom: true,
                num: "00",
                className: "点我",
                changeClassName: function() {
                    model2.num = (100 * Math.random()).toFixed(0);
                    model2.className = this.className
                }
            })


            var model3 = avalon.define({
                $id: "test3",
                color: "red",
                toggle: true,
                changeToggle: function() {
                    model3.toggle = !model3.toggle
                },
                switchColor: function() {
                    model3.color = model3.color === "red" ? "blue" : "red"
                }
            })


            avalon.define({
                $id: "test4",
                array: avalon.range(0, 14)
            })
        </script>
        <style>
            .test{
                width:100px;
                height:100px;
                border:1px solid red;
                color:red;
                -webkit-user-select: none;  /* Chrome all / Safari all */
                -moz-user-select: none;     /* Firefox all */
                -ms-user-select: none;      /* IE 10+ */
                -o-user-select: none;
                user-select: none;          
            }
            .aaa{
                color:blue;
                border:1px solid blue;
            }

            .ms-class div{
                display:inline-block;
                width:200px;
                height:100px;
                border: 1px solid  black;
            }
            .active{
                background: black;
                color: white;
            }
            .bgRed {
                background:palegoldenrod;
            }
            .hover{
                background: red;
                color: white;
            }

            .ms-class-test{
                background:green;
                width:300px;
                height:100px;
            }
            .c-red{
                background: red;
            }
            .c-blue{
                background: blue;
            }

            .zebra-table{
                border-collapse: collapse;
                width:400px;
                border:1px solid black;
            }
            .zebra-table td{
                border:1px solid black;
                text-indent: 1em;
            }
            .zebra-table .even td{
                background:black;
                color:white;
            }
            .zebra-table .hoverz td{
                color: red;
                font-weight: bolder;
            }
        </style>
    </head>

    <body>

        <div  ms-controller="ms-class">
            <div class="test" ms-class="aaa:toggle" ms-click="click">点我</div>
            <div  ms-class="aaa"  ms-class-1="bbb"  ms-class-2="ccc"> 它的名类是aaa bbb ccc   </div>
            <div  ms-class-2="aaa" ms-class="bbb"  ms-class-1="ccc" > 它的名类是bbb ccc aaa   </div>
            <div  ms-class="bbb"  ms-class-1="aaa"  ms-class-2="ccc"> 它的名类是bbb aaa ccc   </div>
            <div  ms-class="xxx yyy zzz" ms-class-1="zzz:false" >  它的名类是xxx yyy   </div>
            <div  ms-class="XXX YYY ZZZ:true" >  它的名类是XXX YYY ZZZ    </div>
        </div>


        <div ms-controller="test2" class="ms-class">
            <div ms-active="active" >测试:active</div>
            <div ms-hover="hover" >测试:hover</div>
            <div ms-class="bgRed width{{w}} height{{h}}" ms-css-width="h">
                类名通过插值表达式生成<br/>
                {{w}} * {{h}}<br/>
                <input data-duplex-event="change" ms-duplex="h">
            </div>
            <p><button type="button" ms-class="test{{num}}" ms-click="changeClassName">{{className}}</button></p>
        </div>


        <div ms-controller="test3">
            <div>{{color}} {{toggle}}</div>
            <div class="ms-class-test" ms-hover="c-{{color}}:toggle"> </div>
            <button ms-click="switchColor"> 点我改变类名</button>
            <button ms-click="changeToggle"> 点我改变toggle</button>
        </div>


        <div ms-controller="test4" >
            <table class="zebra-table">
                <tr ms-repeat="array" ms-hover="hoverz" ms-class="even: $index % 2 == 0"><td>{{$index}}</td><td>{{ new Date - 0 | date("yyyy-MM-dd")}}</td></tr>
            </table>
        </div>
    </body>
</html>